<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hệ sinh thái Cù Lao Chàm</title>

<link rel="stylesheet" type="text/css" href="css/home.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<script type="text/javascript" src="script/jquery-1.6.1.min.js"> </script>
<script type="text/javascript" src="script/jquery.dataTables.js"></script>
<script type="text/javascript" src="script/TableTools.js"></script>
<script type="text/javascript" src="script/ZeroClipboard.js"></script>
<script type="text/javascript" src="script/dataTables.editor.js"></script>
<script type="text/javascript" src="script/jquery.jeditable.js"></script>
<script type="text/javascript" src="script/homeControls.js" > </script>
<script type="text/javascript" src="script/markerwithlabel.js" > </script>
<script type="text/javascript" src="script/infobubble.js" > </script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script type="text/javascript" src="script/jquery-ui.js"></script>
<script type="text/javascript" src="script/contextmenu.js" > </script>
<script type="text/javascript" src="script/home.js" > </script>
<script type="text/javascript" src="script/showinfobubble.js" > </script>
<script type="text/javascript" src="script/thongke.js" > </script>

</head>
<body>
	<img class = "image" src="image/general/culaochambanner.gif"/>
	<div id = "control">
		<table>
			<tr>
				<td style = "padding-top: 0px;">
					<input type="button" value="" id="pan" onclick="destroyEvent()" title="Pan"/>
					<input type="button" value="" id="measureDistance" onclick="measureDistance()" title="Measure Distance"/>
					<input type="button" value="" id="measureArea" onclick="measureArea()" title="Measure Area"/>
					<input type="button" value="" id="undo" onclick="undoLine()" title="Undo"/>
					<input type="button" value="" id="delete" onclick="refresh()" title="Delete"/>
					<input type="button" value="" id="print" onclick="printpage()" title="Print"/>
				</td>
				<td><input type="text" id = "measure" size="10px"></td>
				<td><span id = "distance"></span> </td>
			</tr>
		</table>		
	</div>
	
	<div id = "map-canvas"></div>
	<div id = "wrapper">
	<dl> 
		<dt><a href="#">Quản lý thực vật</a></dt>
		<dd>
		<input type="checkbox" name = "chkTVAll" id = "checkThucVat" class = "chkTVAll" style="margin-left: 15px;" onclick="displayPoinThucVat('checkThucVat');"> Chọn tất cả
			<ul id = "thucVatMenu">
				<!--Hệ sinh thái rừng -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái rừng
					<ul>
						<li id = "loai"> <span class="ho"> </span>
							<input type="checkbox" id = "ds" value="2" name = "fd" class="chktv" >Lâm sản (cây gỗ)
							<ul>
								<logic:iterate id="thucVatLamSan" name = "homeForm" property="listThucVatLamSanModel">
								<bean:define id="idHSTThucVatLS" name="thucVatLamSan" property="idHSTThucVat"></bean:define>
									<logic:iterate id="thucVatHST" name="homeForm" property="listThucVatHeSinhThai">
									<bean:define id="idHSTThucVat" name="thucVatHST" property="idHSTThucVat"></bean:define>
									<% if(idHSTThucVatLS.equals(idHSTThucVat)) {%>	
									<li id = "abc">
										<input type="checkbox" id = "${thucVatHST.tenLoaiDiaPhuong}" value="2" name = "${thucVatHST.tenLoaiDiaPhuong}" class="chktv" onclick="displayPoinThucVat('${thucVatHST.tenLoaiDiaPhuong}', 'thucVatLSG');">
										 <a href="#"> <bean:write name="thucVatHST" property="tenLoaiDiaPhuong"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
						<li id = "loai"> <span class="ho"> </span>
							<input type="checkbox" id = "ds" value="2" name = "fd" class="chktv" >Lâm sản ngoài gỗ
							<ul>
								<logic:iterate id="thucVatLamSanNgoaiGo" name = "homeForm" property="listThucVatLamSanNgoaiGoModel">
								<bean:define id="idHSTThucVatLSNG" name="thucVatLamSanNgoaiGo" property="idHSTThucVat"></bean:define>
									<logic:iterate id="thucVatHST" name="homeForm" property="listThucVatHeSinhThai">
									<bean:define id="idHSTThucVat" name="thucVatHST" property="idHSTThucVat"></bean:define>
									<% if(idHSTThucVatLSNG.equals(idHSTThucVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${thucVatHST.tenLoaiDiaPhuong}" value="2" name = "${thucVatHST.tenLoaiDiaPhuong}" class="chktv" onclick="displayPoinThucVat('${thucVatHST.tenLoaiDiaPhuong}', 'thucVatLSNG');">
										<a href="#"> <bean:write name="thucVatHST" property="tenLoaiDiaPhuong"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
				<!--Hệ sinh thái nông nghiệp -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái nông nghiệp
					<ul>
						<li id = "loai"> <span class="ho"> </span>
							<input type="checkbox" id = "ds" value="2" name = "fd" class="chktv" >Trồng trọt
							<ul>
								<logic:iterate id="thucVatTrongTrot" name = "homeForm" property="listThucVatTrongTrotModel">
								<bean:define id="idHSTThucVatTT" name="thucVatTrongTrot" property="idHSTThucVat"></bean:define>
									<logic:iterate id="thucVatHST" name="homeForm" property="listThucVatHeSinhThai">
									<bean:define id="idHSTThucVat" name="thucVatHST" property="idHSTThucVat"></bean:define>
									<% if(idHSTThucVatTT.equals(idHSTThucVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${thucVatHST.tenLoaiDiaPhuong}" value="2" name = "${thucVatHST.tenLoaiDiaPhuong}" class="chktv" onclick="displayPoinThucVat('${thucVatHST.tenLoaiDiaPhuong}', 'thucVatTT');"> 
										<a href="#"> <bean:write name="thucVatHST" property="tenLoaiDiaPhuong"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
				<!--Hệ sinh thái thảm cỏ biển -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái thảm cỏ biển
					<ul>
						<li id = "loai">
							<ul>
								<logic:iterate id="thucVatThamCoBienModel" name = "homeForm" property="listThucVatThamCoBienModel">
								<bean:define id="idHSTThucVatTCB" name="thucVatThamCoBienModel" property="idHSTThucVat"></bean:define>
									<logic:iterate id="thucVatHST" name="homeForm" property="listThucVatHeSinhThai">
									<bean:define id="idHSTThucVat" name="thucVatHST" property="idHSTThucVat"></bean:define>
									<% if(idHSTThucVatTCB.equals(idHSTThucVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${thucVatHST.tenLoaiDiaPhuong}" value="2" name = "${thucVatHST.tenLoaiDiaPhuong}" class="chktv" onclick="displayPoinThucVat('${thucVatHST.tenLoaiDiaPhuong}', 'thucVatTCB');"> 
										<a href="#"> <bean:write name="thucVatHST" property="tenLoaiDiaPhuong"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
				<!--Hệ sinh thái san hô -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái thảm san hô
					<ul>
						<li id = "loai">
							<ul>
								<logic:iterate id="thucVatSanHoModel" name = "homeForm" property="listThucVatSanHoModel">
								<bean:define id="idHSTThucVatSH" name="thucVatSanHoModel" property="idHSTThucVat"></bean:define>
									<logic:iterate id="thucVatHST" name="homeForm" property="listThucVatHeSinhThai">
									<bean:define id="idHSTThucVat" name="thucVatHST" property="idHSTThucVat"></bean:define>
									<% if(idHSTThucVatSH.equals(idHSTThucVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${thucVatHST.tenLoaiDiaPhuong}" value="2" name = "${thucVatHST.tenLoaiDiaPhuong}" class="chktv" onclick="displayPoinThucVat('${thucVatHST.tenLoaiDiaPhuong}', 'thucVatSH');"> 
										<a href="#"> <bean:write name="thucVatHST" property="tenLoaiDiaPhuong"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
			</ul>
		</dd>
		
		<dt><a href="#">Quản lý động vật</a></dt>
		<dd>
		<input type="checkbox" name = "chkDVAll" id = "checkDongVat" class = "chkDVAll" style="margin-left: 15px;" onclick="displayPoinDongVat('checkDongVat');"> Chọn tất cả
			<ul id = "dongVatMenu">
				<!--Hệ sinh thái rừng -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái rừng
					<ul>
						<li id = "loai"> <span class="ho"> </span>
							<input type="checkbox" id = "ds" value="2" name = "fd" class="chktv" >Lâm sản ngoài gỗ
							<ul>
								<logic:iterate id="dongVatLSNG" name = "homeForm" property="listDongVatLamSanNgoaiGoModel">
								<bean:define id="idHSTDongVatLSNG" name="dongVatLSNG" property="idHSTDongVat"></bean:define>
									<logic:iterate id="dongVatHST" name="homeForm" property="listDongVatHeSinhThai">
									<bean:define id="idHSTDongVat" name="dongVatHST" property="idHSTDongVat"></bean:define>
									<% if(idHSTDongVatLSNG.equals(idHSTDongVat)) {%>
									<li id = "bcd">
										<input type="checkbox" id = "${dongVatHST.loai}" value="2" name = "${dongVatHST.loai}" class="chkdv" onclick="displayPoinDongVat('${dongVatHST.loai}', 'dongVatLSNG');"> 
										<a href="#"> <bean:write name="dongVatHST" property="loai"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
				<!--Hệ sinh thái nông nghiệp -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái nông nghiệp
					<ul>
						<li id = "loai"> <span class="ho"> </span>
							<input type="checkbox" id = "ds" value="2" name = "fd" class="chktv" >Chăn nuôi
							<ul>
								<logic:iterate id="dongVatCN" name = "homeForm" property="listDongVatChanNuoiModel">
								<bean:define id="idHSTDongVatCN" name="dongVatCN" property="idHSTDongVat"></bean:define>
									<logic:iterate id="dongVatHST" name="homeForm" property="listDongVatHeSinhThai">
									<bean:define id="idHSTDongVat" name="dongVatHST" property="idHSTDongVat"></bean:define>
									<% if(idHSTDongVatCN.equals(idHSTDongVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${dongVatHST.loai}" value="2" name = "${dongVatHST.loai}" class="chkdv" onclick="displayPoinDongVat('${dongVatHST.loai}', 'dongVatCN');"> 
										<a href="#"> <bean:write name="dongVatHST" property="loai"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
				<!--Hệ sinh thái thảm cỏ biển -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái thảm cỏ biển
					<ul>
						<li id = "loai">
							<ul>
								<logic:iterate id="dongVatTCB" name = "homeForm" property="listDongVatThamCoBienModel">
								<bean:define id="idHSTDongVatTCB" name="dongVatTCB" property="idHSTDongVat"></bean:define>
									<logic:iterate id="dongVatHST" name="homeForm" property="listDongVatHeSinhThai">
									<bean:define id="idHSTDongVat" name="dongVatHST" property="idHSTDongVat"></bean:define>
									<% if(idHSTDongVatTCB.equals(idHSTDongVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${dongVatHST.loai}" value="2" name = "${dongVatHST.loai}" class="chkdv" onclick="displayPoinDongVat('${dongVatHST.loai}', 'dongVatTCB');"> 
										<a href="#"> <bean:write name="dongVatHST" property="loai"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
				<!--Hệ sinh thái san hô -->
				<li id = "ho"> <span class="ho"> </span>
					<input type="checkbox" id = "" value="1" name = "dsfds" class = "chktv item1">Hệ sinh thái san hô
					<ul>
						<li id = "loai">
							<ul>
								<logic:iterate id="dongVatSH" name = "homeForm" property="listDongVatSanHoModel">
								<bean:define id="idHSTDongVatSH" name="dongVatSH" property="idHSTDongVat"></bean:define>
									<logic:iterate id="dongVatHST" name="homeForm" property="listDongVatHeSinhThai">
									<bean:define id="idHSTDongVat" name="dongVatHST" property="idHSTDongVat"></bean:define>
									<% if(idHSTDongVatSH.equals(idHSTDongVat)) {%>	
									<li id = "bcd">
										<input type="checkbox" id = "${dongVatHST.loai}" value="2" name = "${dongVatHST.loai}" class="chkdv" onclick="displayPoinDongVat('${dongVatHST.loai}', 'dongVatSH');"> 
										<a href="#"> <bean:write name="dongVatHST" property="loai"/> </a>
									</li>
									<% } %>
									</logic:iterate>
								</logic:iterate>
							</ul>
						</li>
					</ul>
				</li>
				
			</ul>
		</dd>
		
		<dt><a href="#">Bản đồ hiển thị</a></dt>
		<dd>
			<div style="margin-left: 30px;">
				<br>
				<p><b>Chọn loại bản đồ hiển thị</b></p>
				<select id = "mapselect">
						<option value="macdinh">Mặc định</option>
						<option value="vetinh">Vệ tinh</option>
						<option value="diahinh">Địa hình</option>
				</select>
				<input type = "button" value = "Xem" id = "btmapview" onclick="mapView();">
			</div>
		</dd>
		
		<dt><a href="#">Thống kê - báo cáo</a></dt>
			<dd>
				<div>
					<p><b>Thực vật</b></p>
						<div id = "divtktv">
						<!--xem tat ca thuc vat dang ton tai-->
						<span><a href="#" id = "viewAllThucVat" onclick="viewAllThucVat();"> Xem tất cả thực vật </a></span> <br>
						
						<!--lua chon loai thuc vat can xem-->
						<p>Chọn loài thực vật cần xem:</p>
						<select id = "selectLoaiTV" size="6">
							<option class = "thucvatLoai" value="caytaisinh">Lâm sản gỗ</option>
							<option class = "thucvatLoai" value="caybui">Lâm sản ngoài gỗ</option>
							<option class = "thucvatLoai" value="duoitan">San hô</option>
							<option class = "thucvatLoai" value="tan">Thảm cỏ biển</option>
							<option class = "thucvatLoai" value="trentan">Trồng trọt</option>
						</select>
						
						<!--the select chua cac thuc vat da chon-->
						<select id = "selectedLoaiTV" size="6">
							<option class = "thucvatLoai"></option>
						</select>
						<input type = "button" value = "Xem" onclick="viewSelectThucVat();"> <br>
						
						</div>
				</div>
				<hr>
				<div>
					<p><b>Động vật</b></p>
					 <div id = "divtkdv">
						<!--xem tat ca dong vat dang ton tai-->
						<span><a href="#" id = "viewAllDongVat" onclick="viewAllDongVat();"> Xem tất cả động vật </a></span> <br>
						
						<!--lua chon loai dong vat can xem-->
						<p>Chọn loài động vật cần xem:</p>
						<select id = "selectLoaiDV" size="5">
							<option class = "dongvatLoai" value="caybui">Lâm sản ngoài gỗ</option>
							<option class = "dongvatLoai" value="duoitan">San hô</option>
							<option class = "dongvatLoai" value="tan">Thảm cỏ biển</option>
							<option class = "dongvatLoai" value="trentan">Chăn nuôi</option>
						</select>
						
						<!--the select chua cac dong vat da chon-->
						<select id = "selectedLoaiDV" size="5">
							<option class = "dongvatLoai"></option>
						</select>
						<input type = "button" value = "Xem" onclick="viewSelectDongVat();"> <br>
						
						</div>
				</div>
				<hr>
			</dd>
		
		<dt><a href="#">Thông tin chung</a></dt>
		<dd>
		</dd>
	</dl>
	</div>
	
	<!--Tạo infobubble hien thi thong tin thuc vat CHUNG-->	
	<div id = "infoBubbleThongTinTV" style = "display: none;">
		<table>
			<tr>
				<td>
				<table>
					<tr>
						<td>Tên loài khoa học: <br><input type="text" id = "tvloaikh" ></td>
						<td>Tên loài địa phương: <br><input type="text" id = "tvloaidp" ></td>
						<td>Tên loài latin: <br><input type="text" id = "tvloailt" ></td>
					</tr>
					<tr>
						<td>Tên họ khoa học: <br><input type="text" id = "tvhokh" ></td>
						<td>Tên họ địa phương: <br><input type="text" id = "tvhodp" ></td>
						<td>Tên họ la tin: <br><input type="text" id = "tvholt" ></td>
					</tr>
					<tr>
						<td>Giá trị: </td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtgo"> Gỗ</td>
						<td><input type = "checkbox" id = "tvgtcanh"> Cảnh</td>
						<td><input type = "checkbox" id = "tvgtthuoc"> Thuốc</td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtvlxaydung"> Vật liệu xây dựng</td>
						<td><input type = "checkbox" id = "tvgtthucongmynghe"> Thủ công mỹ nghệ</td>
						<td><input type = "checkbox" id = "tvgtanduoc"> Ăn được</td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtcaydoc"> Cây độc</td>
						<td><input type = "checkbox" id = "tvgtchotinhdau"> Cho tinh dầu</td>
						<td><input type = "checkbox" id = "tvgtnhua"> Nhựa</td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtsoi"> Sợi</td>
						<td><input type = "checkbox" id = "tvgthuocnhuom"> Thuốc nhuộm</td>
						<td><input type = "checkbox" id = "tvgtcongdungkhac"> Công dụng khác</td>
					</tr>
					<tr>
						<td>Mô tả: </td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3" ><textarea id = "tvmota" rows="3" cols="50"> </textarea></td>
					</tr>
					<tr>
						<td>Loại sinh trưởng</td>
						<td colspan = "2">
							<select id = "sltvloaisinhtruong">
								<option value="nhanh">Nhanh</option>
								<option value="cham">Trung bình</option>
								<option value="trungbinh">Chậm</option>
							</select>
						</td>
					</tr>
				</table>
			</td>
			<td valign="top">
				<table style="border:2px solid blue">
					<tr>
						<td>
							<div id="imaTV" style = "width: 130px; height: 130px;"></div> <br>
							<input type = "button" value = "..." onclick ="javascript:document.getElementById('imagefileTV').click();">
							<input id = "imagefileTV" style='display: none' type="file" /> <br>
							<input id = "loadImaTV" type = "button" value = "Load..." onclick = "loadImaTV();">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		</table>
	</div>
	
	<!--Tạo infobubble hien thi thong tin thuc vat LAM SAN-->
	<div id = "infoBubbleTVLamSan" style = "display: none; width: 600px;">
		<table>
			<tr>
				<td>Chiều cao: <input type="text" id = "tvchieucao" >m</td>
				<td>Độ tuổi: <input type="text" id = "tvdotuoi" >tuổi</td>
				<td>Năm khảo sát: <input type="text" id = "tvnamkhaosat" ></td>
			</tr>
			<tr>
				<td>Độ che phủ: </td>
				<td>+ Đông tây: <input style = "width: 85px;" type="text" id = "tvdongtay"> m</td>
				<td>+ Nam bắc: <input  style = "width: 86px;" type="text" id = "tvnambac" > m</td>
		    </tr>
		    <tr>
				<td>Vị trí:</td>
				<td>+ Latatude: <input style = "width: 87px;" type="text" id = "tvlatatude" ></td>
				<td>+ Longatude: <input style = "width: 78px;" type="text" id = "tvlongatude" ></td>
			</tr>
			<tr>
				<td>Bán kính khảo sát:</td>
				<td colspan="2"><input type="text" id = "tvbankinhks" >m</td>
		    </tr>
		    <tr>
				<td>Mật độ:</td>
				<td colspan="2"><input type="text" id = "tvmatdo" ></td>
		    </tr>
			<tr>
				<td>Tầng:</td>
				<td colspan="2">
					<select id = "tvtang" style = "width: 157px;">
						<option value="caytaisinh">Cây tái sinh</option>
						<option value="caybui">Cây bụi</option>
						<option value="duoitan">Dưới tán</option>
						<option value="tan">Tán</option>
						<option value="trentan">Trên tán</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Dạng sống: </td>
				<td colspan="2">
					<select id = "tvdangsong" style = "width: 157px;">
						<option value="caytaisinh">Gỗ lớn</option>
						<option value="caybui">Gỗ trung bình</option>
						<option value="duoitan">Gỗ nhỏ</option>
					</select>
				</td>
			</tr>
		    <tr>
		    	<td>Đường kính:</td>
				<td colspan="2">
					<select id = "tvduongkinh" style = "width: 157px;">
						<option value="caytaisinh">Nhỏ hơn 10cm</option>
						<option value="caybui">Lớn hơn 10cm</option>
					</select>
				</td>
		    </tr>
		    <tr> <td colspan="3"><hr></td> </tr>
		    <tr>
				<td></td>
				<td></td>
				<td>
					<input type = "button" value = "Thêm" id = "bttvthem" onclick="themTV();">
					<input type = "button" value = "Sửa" id = "bttvsua" onclick="suaTV();">
					<input type = "button" value = "Xóa" id = "bttvxoa">
				</td>
			</tr>
		</table>
	</div>
	
	<!--Tạo infobubble hien thi thong tin thuc vat LAM SAN NGOAI GO-->
	<div id = "infoBubbleTVLamSanNgoaiGo" style = "display: none; width: 600px;">
		<table>
			<tr>
				<td>Chiều cao: <input type="text" id = "tvchieucao" >m</td>
				<td>Độ tuổi: <input type="text" id = "tvdotuoi" >tuổi</td>
				<td>Năm khảo sát: <input type="text" id = "tvnamkhaosat" ></td>
			</tr>
		    <tr>
				<td>Vị trí:</td>
				<td>+ Latatude: <input style = "width: 87px;" type="text" id = "tvlatatude" ></td>
				<td>+ Longatude: <input style = "width: 78px;" type="text" id = "tvlongatude" ></td>
			</tr>
			<tr>
				<td>Bán kính khảo sát:</td>
				<td colspan="2"><input type="text" id = "tvbankinhks" >m</td>
		    </tr>
		    <tr>
				<td>Mật độ:</td>
				<td colspan="2"><input type="text" id = "tvmatdo" ></td>
		    </tr>
			<tr>
				<td>Tầng:</td>
				<td colspan="2">
					<select id = "tvtang" style = "width: 157px;">
						<option value="caytaisinh">Cây tái sinh</option>
						<option value="caybui">Cây bụi</option>
						<option value="duoitan">Dưới tán</option>
						<option value="tan">Tán</option>
						<option value="trentan">Trên tán</option>
					</select>
				</td>
			</tr>
		    <tr> <td colspan="3"><hr></td> </tr>
		    <tr>
				<td></td>
				<td></td>
				<td>
					<input type = "button" value = "Thêm" id = "bttvthem" onclick="themTV();">
					<input type = "button" value = "Sửa" id = "bttvsua" onclick="suaTV();">
					<input type = "button" value = "Xóa" id = "bttvxoa">
				</td>
			</tr>
		</table>
	</div>
	
	<!--Tạo infobubble hien thi thong tin thuc vat SAN HO - THAM CO BIEN-->
	<div id = "infoBubbleTVSanHo_ThamCoBien" style = "display: none; width: 600px;">
		<table>
			<tr>
				<td>Chiều cao: <input type="text" id = "tvchieucao" >m</td>
				<td>Độ tuổi: <input type="text" id = "tvdotuoi" >tuổi</td>
				<td>Năm khảo sát: <input type="text" id = "tvnamkhaosat" ></td>
			</tr>
		    <tr>
				<td>Vị trí:</td>
				<td>+ Latatude: <input style = "width: 87px;" type="text" id = "tvlatatude" ></td>
				<td>+ Longatude: <input style = "width: 78px;" type="text" id = "tvlongatude" ></td>
			</tr>
			<tr>
				<td>Bán kính khảo sát:</td>
				<td colspan="2"><input type="text" id = "tvbankinhks" >m</td>
		    </tr>
		    <tr>
				<td>Mật độ:</td>
				<td colspan="2"><input type="text" id = "tvmatdo" ></td>
		    </tr>
			<tr>
				<td>Nguồn gốc tái sinh:</td>
				<td colspan="2">
					<select id = "tvnguongotaisinh" style = "width: 157px;">
						<option value="taisinhhat">Tái sinh hạt</option>
						<option value="taisinhchoi">Tái sinh chồi</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Chất lượng sinh trưởng: </td>
				<td colspan="2">
					<select id = "tvchatluongsinhtruong" style = "width: 157px;">
						<option value="tot">Tốt</option>
						<option value="trungbinh">Trung bình</option>
						<option value="yeu">Yếu</option>
					</select>
				</td>
			</tr>
		    <tr> <td colspan="3"><hr></td> </tr>
		    <tr>
				<td></td>
				<td></td>
				<td>
					<input type = "button" value = "Thêm" id = "bttvthem" onclick="themTV();">
					<input type = "button" value = "Sửa" id = "bttvsua" onclick="suaTV();">
					<input type = "button" value = "Xóa" id = "bttvxoa">
				</td>
			</tr>
		</table>
	</div>
	
	<!--Tạo infobubble hien thi thong tin thuc vat TRONG TROT-->
	<div id = "infoBubbleTVTrongTrot" style = "display: none; width: 600px;">
		<table>
			<tr>
				<td>Chiều cao: <input type="text" id = "tvchieucao" >m</td>
				<td>Vụ mùa: <input type="text" id = "tvvumua" ></td>
				<td>Năm khảo sát: <input type="text" id = "tvnamkhaosat" ></td>
			</tr>
		    <tr>
				<td>Vị trí:</td>
				<td>+ Latatude: <input style = "width: 87px;" type="text" id = "tvlatatude" ></td>
				<td>+ Longatude: <input style = "width: 78px;" type="text" id = "tvlongatude" ></td>
			</tr>
			<tr>
				<td>Bán kính khảo sát:</td>
				<td colspan="2"><input type="text" id = "tvbankinhks" >m</td>
		    </tr>
		    <tr>
				<td>Mật độ:</td>
				<td colspan="2"><input type="text" id = "tvmatdo" ></td>
		    </tr>
			<tr>
				<td>Nguồn gốc tái sinh:</td>
				<td colspan="2">
					<select id = "tvnguongotaisinh" style = "width: 157px;">
						<option value="taisinhhat">Tái sinh hạt</option>
						<option value="taisinhchoi">Tái sinh chồi</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Chất lượng sinh trưởng: </td>
				<td>
					<select id = "tvchatluongsinhtruong" style = "width: 157px;">
						<option value="tot">Tốt</option>
						<option value="trungbinh">Trung bình</option>
						<option value="yeu">Yếu</option>
					</select>
				</td>
				<td>Năng suất: <input type="text" id = "tvnangsuat" ></td>
			</tr>
		    <tr> <td colspan="3"><hr></td> </tr>
		    <tr>
				<td></td>
				<td></td>
				<td>
					<input type = "button" value = "Thêm" id = "bttvthem" onclick="themTV();">
					<input type = "button" value = "Sửa" id = "bttvsua" onclick="suaTV();">
					<input type = "button" value = "Xóa" id = "bttvxoa">
				</td>
			</tr>
		</table>
	</div>
	<!------------------------------------------------------------------------------------------------------------------------------>
	<!--Tạo infobubble hien thi thong tin dong vat CHUNG-->	
	<div id = "infoBubbleThongTinDV" style = "display: none;">
		<table>
			<tr>
				<td>
				<table>
					<tr>
						<td>Tên loài địa phương: <br><input type="text" id = "dvloaikh" ></td>
						<td>Tên loài khoa học: <br><input type="text" id = "dvloailt" ></td>
						<td></td>
					</tr>
					<tr>
						<td>Tên ngành địa phương: <br><input type="text" id = "dvnganhkh" ></td>
						<td>Tên ngành khoa học: <br><input type="text" id = "dvnganhlt" ></td>
						<td></td>
					</tr>
					<tr>
						<td>Tên lớp địa phương: <br><input type="text" id = "dvlopkh" ></td>
						<td>Tên lớp khoa học: <br><input type="text" id = "dvloplt" ></td>
						<td></td>
					</tr>
					<tr>
						<td>Tên bộ địa phương: <br><input type="text" id = "dvbokh" ></td>
						<td>Tên bộ khoa học: <br><input type="text" id = "dvbolt" ></td>
						<td></td>
					</tr>
					<tr>
						<td>Tên họ địa phương: <br><input type="text" id = "dvhokh" ></td>
						<td>Tên họ khoa học: <br><input type="text" id = "dvholt" ></td>
						<td></td>
					</tr>
					<tr>
						<td>Tên chi địa phương: <br><input type="text" id = "dvchikh" ></td>
						<td>Tên chi khoa học: <br><input type="text" id = "dvchilt" ></td>
						<td></td>
					</tr>
					<tr>
						<td>Nơi sống:<br>
							<select id = "dvnoisong" style = "width: 157px;">
								<option value="cahai">Cả hai</option>
								<option value="trencan">Trên cạn</option>
								<option value="duoinuoc">Dưới nước</option>
							</select>
						</td>						
						<td>Hoạt động:<br>
							<select id = "dvhoatdong" style = "width: 157px;">
								<option value="cahai">Cả hai</option>
								<option value="bandem">Ban đêm</option>
								<option value="banngay">Ban ngày</option>
							</select>
						</td>						
						<td></td>
					</tr>
					<tr>
						<td colspan="3">Thức ăn: <input type="text" id = "dvthucan" ></td>
					</tr>
					<tr>
						<td>Mô tả: </td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3" ><textarea id = "dvmota" rows="3" cols="50"> </textarea></td>
					</tr>
				</table>
			</td>
			<td valign="top">
				<table style="border:2px solid blue">
					<tr>
						<td>
							<div id="imaTV" style = "width: 130px; height: 130px;"></div> <br>
							<input type = "button" value = "..." onclick ="javascript:document.getElementById('imagefileDV').click();">
							<input id = "imagefileTV" style='display: none' type="file" /> <br>
							<input id = "loadImaTV" type = "button" value = "Load..." onclick = "loadImaTV();">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		</table>
	</div>
	<!--Tạo infobubble hien thi thong tin dong vat ALL-->
	<div id = "infoBubbleDongVatAll" style = "display: none; width: 600px;">
		<table>
			<tr>
				<td>Độ tuổi: <br><input type="text" id = "dvdotuoi" >tuổi</td>
				<td>Năm khảo sát: <br><input type="text" id = "dvnamkhaosat" ></td>
				<td></td>
			</tr>
			<tr>
				<td>Hình thức sinh sản:</td>
				<td colspan="2">
					<select id = "dvhinhthucsinhsan" style = "width: 157px;">
						<option value="sinhcon">Sinh con</option>
						<option value="detrung">Đẻ trứng</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Vị trí:</td>
				<td>+ Latatude: <br><input style = "width: 87px;" type="text" id = "dvlatatude" ></td>
				<td>+ Longatude: <br><input type="text" id = "dvlongatude" ></td>
			</tr>
			<tr>
				<td>Bán kính khảo sát:</td>
				<td colspan="2"><input type="text" id = "dvbankinhks" >m</td>
		    </tr>
		    <tr>
				<td>Mật độ:</td>
				<td colspan="2"><input type="text" id = "dvmatdo" ></td>
		    </tr>
		    <tr> <td colspan="3"><hr></td> </tr>
		    <tr>
				<td></td>
				<td></td>
				<td>
					<input type = "button" value = "Thêm" id = "bttvthem" onclick="themDV();">
					<input type = "button" value = "Sửa" id = "bttvsua" onclick="suaDV();">
					<input type = "button" value = "Xóa" id = "bttvxoa">
				</td>
			</tr>
		</table>
	</div>
	
	<!---------------------------------------Thong ke--------------------------------------------------->
	<div id="thucVatDialog" style="font-size: 12px;">
		<table border="0" style="margin: 0px; padding: 0px; width: 130%"
			class="dataTables_thucVat" id="thucVatList">
			<thead>
				<tr>
					<th>STT</th>
					<th>Tên loài khoa học</th>
					<th>Tên loài địa phương</th>
					<th>Tên loài la tin</th>
					<th>Tên họ khoa học</th>
					<th>Tên họ địa phương</th>
					<th>Tên họ la tin</th>
					<th>giá trị</th>
					<th>Loại sinh trưởng</th>
					<th>mô tả</th>
					<th>Số Lượng</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	
	<script>
		$("#thucVatDialog").dialog({
			 autoOpen: false,
		     title: "Thực vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 1200,
		     height: 500
		});

		$("#dongVatDialog").dialog({
			 autoOpen: false,
		     title: "Động vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 1200,
		     height: 500
		}); 

		$("#sinhVatDialog").dialog({
			 autoOpen: false,
		     title: "Sinh vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 1200,
		     height: 500
		}); 

		$("#xoathucvat").dialog({
			 autoOpen: false,
		     title: "Quản lý thực vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 400
		});
		$("#bttvxoa").click(function() {
			$("#xoathucvat").dialog("open");
		});
		$("#tvxoahuy").click(function() {
			$("#xoathucvat").dialog("close");
		});

		$("#xoadongvat").dialog({
			 autoOpen: false,
		     title: "Quản lý động vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 400
		});
		$("#btdvxoa").click(function() {
			$("#xoadongvat").dialog("open");
		});
		$("#dvxoahuy").click(function() {
			$("#xoadongvat").dialog("close");
		});
	</script>
	
	</body>
</html>
















